<template>
  <div
    class="model-card-container animate__animated"
    :class="[visible ? 'animate__fadeIn' : 'animate__fadeOut']"
  >
    <div class="list-container">
      <vxe-table
        ref="xTree"
        align="center"
        height="99%"
        class="scrollbarStyle"
        show-overflow
        show-header-overflow
        :data="tableData"
        :column-config="{ resizable: true }"
        :scroll-y="{ enabled: true }"
        :scroll-x="{ enabled: true }"
        :tree-config="{
          transform: true,
          rowField: 'id',
          parentField: 'parentId',
          expandAll: true,
        }"
        :row-config="{ isCurrent: true, isHover: true }"
        @current-change="currentChangeEvent"
        row-id="id"
        :loading="loading"
      >
        <vxe-column type="seq" width="80" title="序号"></vxe-column>
        <vxe-column field="name" title="任务名称" tree-node align="left">
        </vxe-column>
        <vxe-column field="duration" title="周期" width="80"> </vxe-column>
        <vxe-column field="planStartTime" title="计划开始时间" width="120">
        </vxe-column>
        <vxe-column field="planEndTime" title="计划完成时间" width="120">
        </vxe-column>
      </vxe-table>
    </div>
    <div class="bim-container">
      <bimVisual :currentRow="currentRow"></bimVisual>
    </div>
  </div>
</template>

<script>
import { flatTreeData } from "@/utils/util";
import bimVisual from "./bimVisual.vue";
import {
  getListByParentIdTable,
  getListByParentIdDraft,
  getListByParentIdHistory,
} from "@/api/progressManage";
export default {
  inject: ["versionSource", "treeItemSource", "firstIndex", "conditionsSource"],
  components: {
    bimVisual,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      loading: true,
      tableData: [],
      currentRow: {},
      treeData: [],
    };
  },
  methods: {
    getListByParentIdTable,
    getListByParentIdDraft,
    getListByParentIdHistory,
    //查询列表
    getData() {
      let { orgCode, name, defaultTime, tenantCode } = this.conditionsSource();
      let { uuid = "", status = "" } = this.versionSource();
      let apiUrl = "";
      if (status == 4) {
        //正式
        apiUrl = "getListByParentIdTable";
      } else if (status == 5) {
        //历史
        apiUrl = "getListByParentIdHistory";
      } else {
        //草稿
        apiUrl = "getListByParentIdDraft";
      }
      if (!this.treeItemSource()?.uuid) {
        this.tableData = [];
        this.loading = false;
        return;
      }
      this.loading = true;
      this[apiUrl]({
        showAll: 1,
        versionId: uuid,
        parentId: this.treeItemSource()?.uuid ?? "",
        orgCode,
        name,
        startDate: defaultTime?.[0] ?? "",
        endDate: defaultTime?.[1] ?? "",
        proCode: tenantCode,
      })
        .then((res) => {
          let { data } = res;
          this.tableData = data?.dataList ?? [];
          this.currentRow = this.tableData?.[0] ?? {};
          //   if (this.tableData.length > 0) {
          //     this.treeData = this.arrayToTree(
          //       this.tableData,
          //       this.tableData?.[0].id
          //     );
          //     this.getFirstTreeNode();
          //   }
        })
        .catch((_) => {
          this.currentRow = {};
          this.tableData = [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //
    clearData() {
      this.tableData = [];
      this.treeData = [];
      this.currentRow = {};
    },
    //行选中
    currentChangeEvent({ row, rowIndex }) {
      this.currentRow = row;
    },

    getFirstTreeNode() {
      let { treeData, tableData } = this;
      let flatData = flatTreeData(treeData, "children");
      let item = flatData.find((v) => !v.children || v.children.length == 0);
      this.currentRow = item;
      //行高亮
      let current = tableData.find((v) => v.id == item.id);
      this.$refs.xTree.setCurrentRow(current);
    },

    arrayToTree(list, id) {
      let res = [];
      function getChildren(res, parentId) {
        for (const item of list) {
          if (item.parentId === parentId) {
            const newItem = { ...item, children: [] };
            res.push(newItem);
            getChildren(newItem.children, newItem.id);
          }
        }
      }
      getChildren(res, id);
      return res;
    },

    //不能删除
    setPage() {},
  },
};
</script>

<style lang="less" scoped>
.model-card-container {
  height: 100%;
  display: flex;
  padding-top: 10px;
  box-sizing: border-box;
  .list-container {
    width: 600px;
    flex-shrink: 0;
    padding-right: 10px;
  }
  .bim-container {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
  }
}
</style>
